<script setup>
import {ref,defineExpose} from 'vue'
import { useRoamStore } from '../../store';
const roam=useRoamStore()
const list=ref()
const type1=ref("VIP")
const type2=ref("超清母带")
list.value=roam.roamList
console.log(roam.roamList);


</script>
<template>
	<view>
		<view class="popup">
			<view class="popup-top">
				<span class="active">当前播放</span>
				<span>随机播放</span>
				<view class="line"></view>
			</view>	
			<view class="popup-content">
				<view class="content-list" v-for="item in list">
					<view v-if="item.type===type1" :class="{vip:item.type===type1?true:false}" class="common">VIP</view>
					<view v-else :class="{mastering:item.type===type2?true:false}" class="common">超清母带</view>
					<view style="display: flex;flex-direction: column;margin-top: 6px;">
							<span>{{item.song}}</span>	
							<span style="font-size: 12px;">{{item.singer}}</span>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>



<style scoped> 
.popup{
	height: 400px;
	background-color: #2d2d37;
	color: #81818b; 
	 border-top-left-radius: 20px;
	  border-top-right-radius: 20px
}
.popup-top{
	padding: 10px 20px;
}
.active{
	color: #f3f3f5;
}
.popup-top span{
	margin: 10px 30px;
}
.line{
	margin-top: 10px;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #81818b;
}
.popup-content{
	padding: 10px 20px;
	font-size: 14px;
}
.content-list{
	display: flex;
	margin: 5px auto;
	height: 50px;
	/* line-height: 50px; */
}
.content-list .common{	
	margin-top: 12px;
	height: 16px;
	line-height: 16px;
	font-size: 12px;
	margin-right: 10px;
	padding: 0 2px;
	border-radius: 3px;
}
.vip{
	color: red;
	border: 1px solid red;
}
.mastering{
	color: #d19a57;
	border: 1px solid #d19a57;
}
</style>